<template>
    <div>
        <el-dialog :fullscreen="isScreen"  v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}" v-dialogDragWidth="{container:'.el-dialog'}":close-on-click-modal="false" :visible.sync="showDialog"
                   :before-close="handleClose">
                <div slot="title" class="model-title">
                        分店管理
                        <span class="title-left-icon">
                            <i class="icon icon-quanping" @click="isScreen=isScreen?false:true"></i>
                        </span>
                </div>
                <el-form :model="modelForm" ref="modelForm" label-width="100px" class="model-from demo-ruleForm" style="width:96%;height:450px;overflow-y:auto">
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label=" " prop="consumeRates" :rules="[{ required: true, message: '请输入门店名称', trigger: 'blur'}]" class="el-form-item__content_margin">
                                <el-input placeholder="请输入门店名称" maxlength="20" v-model.number="modelForm.consumeRates" >
                                    <template slot="prepend">
                                        <el-button tabIndex="-1">门店名称</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label=" " prop="consumeRates" :rules="[{ required: true, message: '请输入联系人', trigger: 'blur'}]" class="el-form-item__content_margin">
                                <el-input placeholder="请输入联系人" maxlength="5" v-model.number="modelForm.consumeRates" >
                                    <template slot="prepend">
                                        <el-button tabIndex="-1">联系人</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label=" " prop="consumeRates" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur'},rules.phone]" class="el-form-item__content_margin">
                                <el-input placeholder="请输入手机号" maxlength="11" v-model.number="modelForm.consumeRates" >
                                    <template slot="prepend">
                                        <el-button tabIndex="-1">手机号</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label=" " prop="consumeRates" :rules="[{ required: true, message: '请输入编号', trigger: 'blur'},rules.phone]" class="el-form-item__content_margin">
                                <el-input placeholder="请输入编号" maxlength="11" v-model.number="modelForm.consumeRates" >
                                    <template slot="prepend">
                                        <el-button tabIndex="-1">编号</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-upload
                                class="avatar-uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                <p>请选择门店照片</p>
                            </el-upload>
                        </el-col>
                    </el-row>
                    <el-form-item label=" " prop="consumeRates" :rules="[{ required: true, message: '请输入注册码', trigger: 'blur'}]" class="el-form-item__content_margin">
                        <el-input placeholder="请输入注册码" maxlength="11" v-model.number="modelForm.consumeRates" >
                            <template slot="prepend">
                                <el-button tabIndex="-1">注册码</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label=" " prop="consumeRates" :rules="[]" class="el-form-item__content_margin">
                        <el-input placeholder="请输入门店地址" maxlength="11" v-model.number="modelForm.consumeRates" >
                            <template slot="prepend">
                                <el-button tabIndex="-1">门店地址</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                   
                    <el-form-item label="状态" prop="state" :rules="[]" class="margin_left33" style="margin-left: 40px;">
                        <el-radio-group v-model="modelForm.state">
                            <el-radio>
                                <span>正常</span>
                            </el-radio>
                            <el-radio >
                                <span>禁用</span>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="model-footer">
                    <el-button type="primary" @click="submitForm('modelForm')">提交</el-button>
                    <el-button @click="resetForm('modelForm')">取消</el-button>
                </div>
        </el-dialog>
    </div>
</template>
<script>
    //注意路径
    export default {
        props: ['isShow', 'id'],  //参数
        data() {
            return {
                isScreen:false,
                modelForm: {state: ""},
                treeData: [],
                downCategeryId:[],
                categorySelect:{
                   label:"name",
                   value:"id"
                },
                data: [],
                showDialog: false,
                activityId: "",
                isSave: true,
                parentName: "",
                units: [],
                state: [],
                storeMode: [],
                orderType: [],
                inventoryType: [],
                purchase: [{purchaseSpec: "", purchaseUnit: "", purchaseCount: 1, purchasePrice: 0, isDeleted: false}],
                purchaseModel: {purchaseSpec: "", purchaseUnit: "", purchaseCount: 0, purchasePrice: 0, isDeleted: true},
            };
        },
        watch: {
            isShow: function (newValue, oldValue) {
                this.modelForm={};
                this.showDialog = newValue;
                this.downCategeryId=[];
                if (this.showDialog) {
                    if (this.id != '') {
                        this.activityId = this.id;
                        this.isSave = false;
                        this.$axios.get("materials/" + this.activityId + "/update").then(data=> {
                            var dataValue = data.content;
                            var ids = (dataValue.material.category.parentIds+dataValue.material.category.id).replace("0/", "");
                            this.downCategeryId = ids.split("/");
                            this.downCategeryId=this.downCategeryId.map(s => +s);
                            //物品单位启用、禁用处理
                            dataValue.units.map(function(item){
                                if(item.state && item.state.key=='DISABLED'){
                                    item.disabled=true;
                                }else{
                                    item.disabled=false;
                                }
                            })
                            this.purchase=dataValue.purchase;
                            this.units = dataValue.units;
                            this.state = dataValue.state;
                            this.orderType = dataValue.orderType;
                            this.inventoryType = dataValue.inventoryType;
                            this.storeMode = dataValue.storeMode;
                            var tree = dataValue.treeData;
                            this.newLabel(tree);
                            this.treeData = tree;
                            this.modelForm = dataValue.material;
                            if(this.modelForm.stocktakeType){
                                this.modelForm.stocktakeType = dataValue.material.stocktakeType.key;
                            }
                            if(this.modelForm.orderType){
                                this.modelForm.orderType = dataValue.material.orderType.key;
                            }
                            if(this.modelForm.storeMode){
                                this.modelForm.storeMode = dataValue.material.storeMode.key;
                            }
                            if(this.modelForm.state){
                                this.modelForm.state = dataValue.material.state.key;
                            }
                        });
                    } else {
                        this.isSave = true;
                        this.purchase=[{purchaseSpec: "", purchaseUnit: "", purchaseCount: 1, purchasePrice: 0, isDeleted: false}];
                        this.$axios.get("materials/create").then(data=>{
                            var dataValue = data.content;
                            this.modelForm = dataValue.material;
                            //物品单位启用、禁用处理
                            dataValue.units.map(function(item){
                                if(item.state && item.state.key=='DISABLED'){
                                    item.disabled=true;
                                }else{
                                    item.disabled=false;
                                }
                            })
                            this.units = dataValue.units;
                            if (dataValue.material.stocktakeType) {
                                this.modelForm.stocktakeType = dataValue.material.stocktakeType.key;
                            }
                            if (dataValue.material.orderType) {
                                this.modelForm.orderType = dataValue.material.orderType.key;
                            }
                            if (dataValue.material.storeMode) {
                                this.modelForm.storeMode = dataValue.material.storeMode.key;
                            }
                            if (dataValue.material.state) {
                                this.modelForm.state = dataValue.material.state.key;
                            }
                            this.state = dataValue.state;
                            this.orderType = dataValue.orderType;
                            this.inventoryType = dataValue.inventoryType;
                            this.storeMode = dataValue.storeMode;
                            var tree = dataValue.treeData;
                            this.newLabel(tree);
                            this.treeData = tree;
                        });
                    }
                }
            }
        },
        created() {
            window.this = this;
        },
        methods: {
            getValue(value){
                console.log(value);
            },
            isPositive(item,key) {
               let num = parseFloat(item[key]);
               if(!isNaN(num) && (isFinite(num)) && (num > 0)){
                   item[key]=num+"";
               }else{
                   item[key] = "1";
               }
            },
            newLabel(newList) {
                if (newList) {
                    for (var i = 0; i < newList.length; i++) {
                        newList[i].label = newList[i].name;
                        newList[i].value = newList[i].id + "";
                        if (newList[i].children.length == 0) {
                            newList[i].children = null;
                        } else {
                            for (var s = 0; s < newList[i].children.length; s++) {
                                newList[i].children[s].label = newList[i].children[s].name;
                                newList[i].children[s].value = newList[i].children[s].id + "";
                                newList[i].children[s].children = null;
                            }
                        }
                    }
                }
            },
            addPurchase(index) {
                this.purchase.push(this.purchaseModel);
                this.purchaseModel = {
                    purchaseSpec: "",
                    purchaseUnit: null,
                    purchaseCount: 0,
                    purchasePrice: 0,
                    isDeleted: true
                };
            },
            delPurchase(index) {
                if (this.purchase.length > 1) {
                    this.purchase.splice(index, 1);
                } else {
                    this.$message.info("最少保留一条");
                }
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        for(let i=0;i<this.purchase.length;i++){
                            console.log(this.$refs["pur"+i]);
                            this.$refs["pur"+i][0].validate((valid)=>{
                               if(valid){

                               }else{
                                   return;
                               }
                            })
                        }
                        var data = {};
                        data.material = this.modelForm;
                        data.purchase = this.purchase;
                        this.modelForm.category = this.downCategeryId[this.downCategeryId.length - 1];

                        // this.modelForm.category=this.downCategeryId.join("/");
                        // this.modelForm.category=this.downCategeryId
                        if (!this.modelForm.category) {
                            this.modelForm.category = 0;
                        }
                        if(this.modelForm.category==0){
                            this.$message.error("请选择类别");
                            return;
                        }
                        for(let i=0;i<this.purchase.length;i++){
                            let ref='pur'+i;
                            this.$refs[ref][0].validate((valid) => {
                                if (valid) {
                                    if(i==this.purchase.length-1){
                                        if (this.isSave) {
                                            this.$axios.post("materials/create", data,"json").then(data=> {
                                                if (data.status == 200) {
                                                    this.$message({
                                                        message: data.message,
                                                        type: 'success'
                                                    });
                                                    this.$emit('addSuccess');
                                                } else {
                                                    this.$message.error(data.message);
                                                }
                                            })
                                        } else {
                                            this.modelForm._method = "PUT";
                                            this.$axios.put("materials/" + this.activityId + "/update", data).then(data=> {
                                                if (data.status == 200) {
                                                    this.$message({
                                                        message: data.message,
                                                        type: 'success'
                                                    });
                                                    this.$emit('addSuccess');
                                                } else {
                                                    this.$message.error(data.message);
                                                }
                                            });
                                        }
                                    }
                                }else{
                                    this.$message.error("请检查采购规格");
                                    return;
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs["modelForm"].resetFields();
                this.$emit('close');
                this.showDialog = false;
            },
            handleClose(done) {
                this.$refs["modelForm"].resetFields();
                this.$emit('close');
                done();
            }
        }
    }
</script>
<style scoped>
    .cggg-con{
        background-color: #F9F9F9;
        border: 1px solid #cccccc;
        border-top: 3px solid #1ab394;
        margin:0 10px 10px 100px;
        padding: 5px 15px 15px 15px;
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    border: 1px dashed #c0c0c0;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>